import Vue from 'vue'
// 导入axios
import axios from 'axios'
// 实现Loading效果
// 1.按需导入 Loading 组件
import { Loading } from 'element-ui'

// 配置请求根路径
// axios.defaults.baseURL = 'https://www.escook.cn'
axios.defaults.baseURL = 'http://localhost:8080/'

// 2.声明变量，用来存储 Loading 组件的实例对象，该实例对象是单例的
let loadingInstance = null

// 设置请求的拦截器，包含成功和失败的回调
// 成功的回调必须执行 return request，失败回调可不设置
axios.interceptors.request.use(request => {
  // 为当前请求的请求头配置 token 认证字段
  request.headers.Authorization = 'Bearer XXX'

  // 3.调用 Loading 组件的 service() 方法，创建组件实例，并全屏展示 loading 效果
  loadingInstance = openLoading()

  // 将请求的配置信息返回
  return request
})

// 设置请求的拦截器，包含成功和失败的回调
// 成功的回调必须执行 return response，失败回调可不设置
axios.interceptors.response.use(response => {
  // 4.关闭 loading 效果
  loadingInstance.close()
  // 将请求的配置信息返回
  return response
})

// 通过 Vue 构造函数的原型对象，全局配置axios
Vue.prototype.$http = axios

// 调用 loading 的 service() 方法
export function openLoading() {
  const loading = Loading.service({
    // 锁屏
    lock: true,
    // 全屏加载
    fullscreen: true,
    // 加载动画文字
    text: '加载中...',
    // 加载图标
    spinner: 'el-icon-loading',
    // 背景颜色 #ccc
    background: 'rgba(204, 204, 204, .6)'
  })
  setTimeout(() => {
    // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close()
  }, 5000)
  return loading
}
